<template>
  <div class="vue-container">
    <el-dialog
      ref="maxDialog"
      v-drag
      :title="ruleForm.id ? '编辑模板参数' : '新增模板参数'"
      :visible.sync="dialogVisible"
      width="550px"
      @closed="closedDialog"
    >
      <el-form
        ref="reform"
        v-loading="loading"
        :model="ruleForm"
        status-icon
        :rules="rules"
        :size="size"
        label-width="120px"
        :show-message="showMessage"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        element-loading-text="数据正在加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-form-item label="模板名称">
          <el-input
            v-model.trim="name"
            disabled
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="模板参数键" prop="code">
          <el-input
            v-model.trim="ruleForm.code"
            placeholder="请输入模板参数键"
            type="text"
            show-word-limit
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="参数名称" prop="name">
          <el-input
            v-model.trim="ruleForm.name"
            placeholder="请输入参数名称"
            type="text"
            show-word-limit
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="参数默认值" prop="defaultValue">
          <el-input
            v-model.trim="ruleForm.defaultValue"
            placeholder="请输入参数默认值"
            type="text"
            show-word-limit
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          prop="optElement"
          label="操作组件"
        >
          <el-select v-model="ruleForm.optElement" style="width: 100%;">
            <el-option
              v-for="(item, index) in obj.optElementList"
              :key="index"
              :label="item.label"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="ruleForm.optElement === 'select' || ruleForm.optElement === 'radio'
            || ruleForm.optElement === 'checkbox'"
          prop="domainId"
          label="关联字典域"
        >
          <el-select v-model="ruleForm.domainId" style="width: 100%;">
            <el-option
              v-for="(item, index) in obj.dictDomainAll"
              :key="index"
              :label="item.code"
              :value="item.id"
            >
              <div>
                <el-tooltip placement="left-start">
                  <span>{{ item.code }}</span>
                  <div slot="content">
                    <span style="float: left;">{{ item.code }}</span>
                    <span style="float: right;margin-left: 15px;">{{ item.name }}</span>
                  </div>
                </el-tooltip>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否必填" prop="required">
          <el-radio-group v-model="ruleForm.required">
            <el-radio
              v-for="(item, index) in obj.requiredList"
              :key="index"
              :label="Number(item.code)"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="ruleForm.required === 1" label="参数校验描述" prop="message">
          <el-input
            v-model.trim="ruleForm.message"
            placeholder="请输入参数校验描述"
            type="text"
            show-word-limit
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="输入框占位符" prop="placeholder">
          <el-input
            v-model.trim="ruleForm.placeholder"
            placeholder="请输入输入框占位符"
            type="text"
            show-word-limit
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model.trim="ruleForm.sort"
            :min="0"
            placeholder="请输入排序"
            style="width: 100%;"
            show-word-limit
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="参数状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio
              v-for="(item, index) in obj.statusList"
              :key="index"
              :label="Number(item.code)"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model.trim="ruleForm.remarks"
            placeholder="请输入备注"
            type="textarea"
            :rows="4"
            show-word-limit
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :size="size" @click="dialogVisible = false">取消</el-button>
        <el-button v-throttle :size="size" :loading="loading" type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mixin } from '@/views/pages/mixin/save'
import { create, edit } from '@/api/system/template-param-config'
export default {
  name: 'TemplateParamConfigSave',
  mixins: [mixin],
  data() {
    return {
      // 表单对象
      ruleForm: {
        status: 1,
        sort: 0,
        optElement: 'input',
        required: 2,
        templateId: this.$route.query.templateId
      },
      // 模板名称
      name: this.$route.query.name,
      // 表单校验
      rules: {
        code: [{ required: true, message: '请输入模板参数键', trigger: 'blur' }],
        name: [{ required: true, message: '请输入参数名称', trigger: 'blur' }],
        optElement: [{ required: true, message: '请选择操作组件', trigger: 'blur' }],
        domainId: [{ required: true, message: '请选择关联字典域', trigger: 'blur' }],
        required: [{ required: true, message: '请选择是否必填', trigger: 'blur' }],
        message: [{ required: true, message: '请输入参数校验描述', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 弹出窗口加载
    openDialog(rows) {
      this.dialogVisible = true
      if (rows) {
        this.ruleForm = { ...this.ruleForm, ...rows }
      } else {
        this.ruleForm = {
          status: 1,
          sort: 0,
          optElement: 'input',
          required: 2,
          templateId: this.$route.query.templateId
        }
      }
    },
    // 提交表单
    submitForm() {
      this.$refs['reform'].validate((valid, obj) => {
        if (valid) {
          this.loading = true
          if (this.ruleForm.id) {
            edit(this.ruleForm).then((res) => {
              this.$message({ message: '保存成功', type: 'success' })
              this.$emit('ok', this.ruleForm)
              this.dialogVisible = false
            }).finally(() => {
              this.loading = false
            })
          } else {
            create(this.ruleForm).then((res) => {
              this.$message({ message: '保存成功', type: 'success' })
              this.$emit('ok', this.ruleForm)
              this.dialogVisible = false
            }).finally(() => {
              this.loading = false
            })
          }
        } else {
          const field = []
          for (const key in obj) {
            field.push(obj[key][0].message)
          }
          this.$message.error(field[0])
          return false
        }
      })
    }
  }
}
</script>
